<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu v-show="!collapsed" width="auto" theme="dark" @on-select="handleMenu">
      <template v-for="(item, index) in list">
        <re-submenu
          v-if="item.children"
          :parent="item"
          :key="`menu_${item.path}`">
        </re-submenu>
        <menu-item v-else :key="`menu_${item.path}`" :name="item.path">
          <Icon :type="item.icon" />
          {{ item.name}}
        </menu-item>
      </template>
    </Menu>
    <div v-show="collapsed" class="drop-wrapper">
      <template v-for="item in list">
        <re-dropdown @on-select="handleMenu" v-if="item.children" :show-title="false " icon-color="#fff" :key="`drop_${item.path}`" :parent="item"></re-dropdown>
        <Tooltip v-else transfer :content="item.name" :key="`drop_${item.path}`" placement="right">
          <span class="drop-menu-span" @click="handleMenu(item.path)">
            <icon :type="item.icon" color="#fff" size="20"></icon>
          </span>
        </Tooltip>
      </template>
    </div>
  </div>
</template>

<script>
import ReSubmenu from './re-submenu'
import ReDropdown from './re-dropdown'
export default {
  name: 'SideMenu',
  components: {
    ReSubmenu,
    ReDropdown
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleMenu (name) {
      console.log(name)
      if(name.slice(0,4) !== 'null') this.$router.push(name)
    }
  }
}
</script>

<style lang="less">
.side-menu-wrapper{
  width: 100%;
  .ivu-tooltip, .drop-menu-span{
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 0;
  }
  .drop-wrapper > .ivu-dropdown{
    display: block;
    padding: 5px;
    margin: 0 auto;
    .ivu-select-dropdown{
      margin: 5px 5px;
    }
  }
}
</style>
